<template>
  <div class="container">
    <div class="box">
      <xny-crud
        :data="tableData"
        :column="tableColumn"
        :option="tableOption"
      ></xny-crud>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XnyCrudDemo',
  data() {
    return {
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
          search: true,
        },
        {
          label: '列2',
          prop: 'column2',
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      tableData: [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
          column4: '1-4',
          id: 1,
          parentId: null,
          hasChild: true,
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
          column4: '2-4',
          id: 2,
          parentId: null,
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
          column4: '3-4',
          id: 3,
          parentId: null,
          hasChild: 1,
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
          column4: '4-4',
          id: 4,
          parentId: null,
        },
        {
          column1: '5-1',
          column2: '5-2',
          column3: '5-3',
          column4: '5-4',
          id: 5,
          parentId: null,
        },
        {
          column1: '6-1',
          column2: '6-2',
          column3: '6-3',
          column4: '6-4',
          id: 6,
          parentId: null,
        },
        {
          column1: '7-1',
          column2: '7-2',
          column3: '7-3',
          column4: '7-4',
          id: 7,
          parentId: null,
        },
        {
          column1: '8-1',
          column2: '8-2',
          column3: '8-3',
          column4: '8-4',
          id: 8,
          parentId: null,
        },
        {
          column1: '9-1',
          column2: '9-2',
          column3: '9-3',
          column4: '9-4',
          id: 9,
          parentId: null,
        },
      ],
      tableOption: {},
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.box {
  width: 1400px;
  height: 700px;
  background: #eee;
  margin: 30px auto;
}
</style>
